<template>
  <div class="guide">
    <div class="guide-header">
      <img src="@/assets/img/banner4.png" alt=""/>
    </div>
    <div class="guide-content">
    <!-- 外面的tab -->
    <el-button class="btn" type="warning" round @click="contriFrom()">投稿</el-button>
    <el-tabs v-model="active_Warp" :tab-position="tabPosition" @tab-click="getArticle" class="tab_box">
      <el-tab-pane v-for="(item, index) in typeOption" :key="index" :name="item.avdRelId + ''">
        <span slot="label" class="tab-title"><img class="icon" src="@/assets/img/icon1.png" alt=""/> <p>{{item.name}}</p></span>
        <!-- 里面的tab -->
        <div class="content-box">
          <el-input
            placeholder="请输入标题"
            v-model="listParams.title"
            suffix-icon="el-icon-search"
            clearable>
          </el-input>
          <el-tabs v-model="activeName" @tab-click="getMoidle" class="sed-tab">
            <el-tab-pane label="全部" name="0">
              <div v-if="articleList.length">
                <ul class="all-con">
                  <li class="all-list" v-for="(item,index) in articleList" :key="item.avdId">
                    <div class="img-list" @click="getDetail(item.avdId)">
                      <img :src="item.cover" alt=""/>
                      <i v-if="item.module == 2" class="el-icon-video-play"></i>
                    </div>
                    <div class="img-con">
                      <div @click="getDetail(item.avdId)">
                        <p class="img-title">{{item.title}}</p>
                        <p class="img-intro">{{item.description}}</p>
                        <ul>
                          <li v-for="tag in item.tags">{{tag.name}}</li>
                        </ul>
                      </div>
                      <div class="img-bottom">
                        <div class="bot-left">
                        <img :src="item.user.creatorAvatar" alt=""/>
                          <p>{{item.user.creatorName}}</p>
                        </div>
                        <div class="bot-right">
                        <p>
                          <img src="@/assets/img/read.png" alt=""/>
                          <!-- <i class="el-icon-edit"></i> -->
                          <span>{{item.viewNum}}</span>
                        </p>
                        <p>
                          <b @click="getGood(index,item.avdId)">
                            <img v-if="item.isGood" src="@/assets/img/goodicon.png" alt=""/>
                            <img v-else src="@/assets/img/goodred.png" alt=""/>
                          </b>
                          <span>{{item.likeNum}}</span>
                        </p>
                        <p>
                          <b @click="getCollect(index,item.avdId)">
                          <img v-if="item.isCollect" src="@/assets/img/collect.png" alt=""/>
                          <img v-else src="@/assets/img/collectred.png" alt=""/>
                          </b>
                          <span>{{item.collectNum}}</span>
                        </p>
                      </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- 分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listParams.page"
                    :page-sizes="[4, 8, 12, 16]"
                    :page-size="listParams.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="alltotal">
                </el-pagination>
              </div>
              <div v-else>
                <el-empty></el-empty>
              </div>
            </el-tab-pane>
            <el-tab-pane label="视频" name="2">
              <div v-if="articleList.length">
                <ul class="all-con">
                  <li class="all-list" v-for="(item,index) in articleList" :key="item.avdId">
                    <div class="img-list"  @click="getDetail(item.avdId)">
                      <img :src="item.cover" alt=""/>
                      <i class="el-icon-video-play"></i>
                    </div>
                    <div class="img-con">
                      <div>
                        <p class="img-title">{{item.title}}</p>
                        <p class="img-intro">{{item.description}}</p>
                        <ul>
                          <li v-for="tag in item.tags">{{tag.name}}</li>
                        </ul>
                      </div>
                    
                      <div class="img-bottom">
                        <div class="bot-left">
                          <img :src="item.user.creatorAvatar" alt=""/>
                          <p>{{item.user.creatorName}}</p>
                        </div>
                        <div class="bot-right">
                        <p>
                          <img src="@/assets/img/read.png" alt=""/>
                          <span>{{item.viewNum}}</span>
                        </p>
                        <p>
                          <b @click="getGood(index,item.avdId)">
                            <img v-if="item.isGood" src="@/assets/img/goodicon.png" alt=""/>
                            <img v-else src="@/assets/img/goodred.png" alt=""/>
                          </b>
                          <span>{{item.likeNum}}</span>
                        </p>
                        <p>
                          <b @click="getCollect(index,item.avdId)">
                          <img v-if="item.isCollect" src="@/assets/img/collect.png" alt=""/>
                          <img v-else src="@/assets/img/collectred.png" alt=""/>
                          </b>
                          <span>{{item.collectNum}}</span>
                        </p>
                      </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- 分页 -->
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="listParams.page"
                    :page-sizes="[4, 8, 12, 16]"
                    :page-size="listParams.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="alltotal">
                </el-pagination>
              </div>
              <div v-else>
                <el-empty></el-empty>
              </div>
            </el-tab-pane>
            <el-tab-pane label="文章" name="1">
              <div v-if="articleList.length">
                <ul class="all-con">
                  <li class="all-list" v-for="(item,index) in articleList" :key="item.avdId">
                    <div class="img-list" @click="getDetail(item.avdId)">
                      <img :src="item.cover" alt=""/>
                      <!-- <i class="el-icon-video-play"></i> -->
                    </div>
                    <div class="img-con">
                      <div @click="getDetail(item.avdId)">
                        <p class="img-title">{{item.title}}</p>
                        <p class="img-intro">{{item.description}}</p>
                        <ul>
                          <li v-for="tag in item.tags">{{tag.name}}</li>
                        </ul>
                      </div>
                      <div class="img-bottom">
                        <div class="bot-left">
                          <img :src="item.user.creatorAvatar" alt=""/>
                          <p>{{item.user.creatorName}}</p>
                        </div>
                        <div class="bot-right">
                        <p>
                          <img src="@/assets/img/read.png" alt=""/>
                          <span>{{item.viewNum}}</span>
                        </p>
                        <p>
                          <b @click="getGood(index,item.avdId)">
                            <img v-if="item.isGood" src="@/assets/img/goodicon.png" alt=""/>
                            <img v-else src="@/assets/img/goodred.png" alt=""/>
                          </b>
                          <span>{{item.likeNum}}</span>
                        </p>
                        <p>
                          <b @click="getCollect(index,item.avdId)">
                          <img v-if="item.isCollect" src="@/assets/img/collect.png" alt=""/>
                          <img v-else src="@/assets/img/collectred.png" alt=""/>
                          </b>
                          <span>{{item.collectNum}}</span>
                        </p>
                      </div>
                      </div>
                    </div>
                  </li>
                </ul>
                <!-- 分页 -->
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="listParams.page"
                  :page-sizes="[4, 8, 12, 16]"
                  :page-size="listParams.size"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="alltotal">
                </el-pagination>
              </div>
              <div v-else>
                <el-empty></el-empty>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 投稿弹出框 -->
    <el-dialog title="新建文章" :visible.sync="dialogFormVisible" >
      <newArticle></newArticle>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import{ getActicleoption,getGuideList,getGuideAdd,getGuideReduce } from './../../../api/guide'
import newArticle from '../../../components/newArticle.vue';
export default {
  components: { newArticle },
    data() {
      return {
        tabPosition: 'left',
        active_Warp:'101',
        activeName: '0',
        listParams:{
          isPublic:true,
          page:1,
          size:10,
          title:'',
          module:0,
          typeIds:[]
        },
        articleList:[],
        alltotal:0,
        dialogFormVisible: false,
        typeOption:[],
        imgIcon:[
          {
            id:1,
            img:require("@/assets/img/icon1.png"),
          },
          {
            id:2,
            img:require("@/assets/img/icon2.png"),
          },
          {
            id:3,
            img:require("@/assets/img/icon3.png"),
          },
          {
            id:4,
            img:require("@/assets/img/icon4.png"),
          },
          {
            id:5,
            img:require("@/assets/img/icon5.png"),
          },
          {
            id:6,
            img:require("@/assets/img/icon6.png"),
          },
        ],
      }
    },
    methods:{
      // 点击切换
      getArticle(e) {
        this.listParams.typeIds.push(parseInt(e.name));
        this.listParams.typeIds.shift()
      },
      // 里面tab切换
      getMoidle(e){
        this.listParams.module = parseInt(e.name);
      },
      // 监听事件
      handleArticlelist(newVal){
        let user = {
          creatorAvatar:'',
          creatorName:'',
          creatorId:'',
        }
        getGuideList(newVal).then(res=>{
          // console.log(res)
          this.articleList = res.result.list;
          this.alltotal = res.result.total;
          this.articleList.map(item=>{
            this.$set(item, 'isGood', 'true');
            this.$set(item, 'isCollect', 'true')
          })
           this.articleList.map(item=>{
            if(item.user == null){
              item.user = JSON.parse(JSON.stringify(user))
            }
          })
        })
      },
      // 点赞
      getGood(index,id){
        // console.log(index,id);
        let item = this.articleList[index];
        console.log(item);
        item.isGood = ! item.isGood;
        let goodParams = {
          businessId:id,
          type:2
        }
        if(!item.isGood){
          item.likeNum++;
          getGuideAdd(goodParams).then(res=>{
            console.log(res);
            if(res.code == 200){
              this.$message.success('点赞成功');
            }
          })
        }else{
          item.likeNum--;
          getGuideReduce(goodParams).then(res=>{
            console.log(res);
            if(res.code == 200){
              this.$message.success('点赞取消');
            }
          })
        }
      },
      // 收藏
      getCollect(index,id){
        // this.isCollect =!this.isCollect;
        let item = this.articleList[index];
        console.log(item);
        item.isCollect = ! item.isCollect;
        let goodParams = {
          businessId:id,
          type:3
        }
        if(!item.isCollect){
          item.collectNum++;
          getGuideAdd(goodParams).then(res=>{
            console.log(res);
            if(res.code == 200){
              this.$message.success('收藏成功');
            }
          })
        }else{
          item.collectNum--;
          getGuideReduce(goodParams).then(res=>{
            console.log(res);
            if(res.code == 200){
              this.$message.success('收藏取消');
            }
          })
        }
      },
      // 跳转详情页
      getDetail(id){
        this.$router.push(
          {
            name:"guideDetail",
            query:{
              id
            }
          }
        )
      },
      contriFrom(){
        this.dialogFormVisible = true;
      },
      // handleLimit(file, fileList) {
      //   if (fileList.length >= 1) {
      //       this.eqObj.uploadDisabled = true;
      //       this.$set(this.eqObj, 'uploadDisabled', true);
      //   } else {
      //       this.eqObj.uploadDisabled = false;
      //       this.$set(this.eqObj, 'uploadDisabled', false);
      //   }
      // },
      // handleSuccess(response, file, fileList) {
      //   if (response.code == 200) {
      //     this.contributeForm.cover=response.result.relativeUrl;
      //     this.$message.success("上传成功");
      //     this.$refs.contributeForm.validateField('cover');
      //   }else{
      //     this.$message.error('视频上传失败，请重新上传！');
      //   }
      // },
      // handlePictureCardPreview(file){
      //   if(file.response.code == 200){
      //     this.dialogImageUrl = file.response.result.absoluteUrl;
      //     this.dialogVisible = true;
      //   }
      // },
      // handleRemove(file) {
      //   this.eqObj.uploadDisabled = false;
      // },
      // handleLimitvideo(file, fileList) {
      //   console.log(file, fileList,'2222222222222')
      //   if (fileList.length >= 1) {
      //       this.eqObj.uploadVideo = true;
      //       this.$set(this.eqObj, 'disabledvideo', true);
      //   } else {
      //       this.eqObj.uploadVideo = false;
      //       this.$set(this.eqObj, 'disabledvideo', false);
      //   }
      // },
      // handleVideoupload(file){
      //   console.log(file,'33333333333');
      // },
      // handleSuccessvideo(response, file, fileList) {
      //   console.log(response,'22222222222');
      //   $('.upload-images .el-upload--picture-card').hide();
      //   $('.upload-images .el-upload--picture-card').hide();
      //   $('.upload-images .el-upload-list .el-upload-list__item').prepend('<video></video>');
      //   $('.upload-images .el-upload-list .el-upload-list__item video').addClass('el-upload-list__item-thumbnail');
      //   $('.upload-images .el-upload-list .el-upload-list__item video').attr({
      //       width: '320px',
      //       height: '240px',
      //       controls: 'controls',
      //       src: file.url
      //   });
      //   // $('.upload-images .el-upload-list .el-upload-list__item img').remove();
      //   if (response.code == 200) {
      //     this.contributeForm.video = response.result.relativeUrl;
      //     this.$message.success("上传成功");
      //   }else{
      //     this.$message.error('视频上传失败，请重新上传！');
      //   }
      // },
      // handleVideoPreview(file){
      //   console.log(file,'223333333333');
      //   if(file.response.code == 200){
      //     this.videoUrl = file.response.result.absoluteUrl;
      //     this.dialogvideoVisible = true;
      //     this.playerOptions.sources.push(this.videoUrl);
      //   }
      // },
      // handleRemovevideo(file, fileList) {
      //   // console.log(file, fileList);
      //   this.eqObj.uploadVideo = false;
      //   $('.upload-images .el-upload--picture-card').show();

      // },
      // change(data){
      //   this.contributeForm.paragraph = data;
      // },
      // // 保存草稿
      // goKeep(formName){
      //   let params = {
      //     isDraft:true,
      //     typeIds:[this.$refs[formName].model.typeIds],
      //     brandIds:[this.$refs[formName].model.brandIds],
      //     tagIds:[this.$refs[formName].model.tagIds],
      //     module: this.$refs[formName].model.module,
      //     title: this.$refs[formName].model.title,
      //     description: this.$refs[formName].model.description,
      //     paragraph: this.$refs[formName].model.paragraph,
      //     cover: this.$refs[formName].model.cover,
      //     video: this.$refs[formName].model.video,
      //   }
      //   getActicleSave(params).then(res=>{
      //     console.log(res)
      //     if(res.code == 200){
      //       this.$message.success("保存成功");
      //     }
      //   })
      // },
      // // 提交审核
      // goExamine(formName){
      //   if(!getToken()){
      //     this.$message.warning('请您先登录，再提交')
      //   }else{
      //     if(this.agree && this.promise ){
      //       this.$refs[formName].validate((valid) => {
      //         if (valid) {
      //           let params = {
      //             isDraft: false,
      //             typeIds:[this.$refs[formName].model.typeIds],
      //             brandIds:[this.$refs[formName].model.brandIds],
      //             tagIds:[this.$refs[formName].model.tagIds],
      //             module: this.$refs[formName].model.module,
      //             title: this.$refs[formName].model.title,
      //             description: this.$refs[formName].model.description,
      //             paragraph: this.$refs[formName].model.paragraph,
      //             cover: this.$refs[formName].model.cover,
      //             video: this.$refs[formName].model.video,
      //           }
      //           // console.log(params);
      //           getActicleSave(params).then(res=>{
      //             console.log(res)
      //             if(res.code == 200){
      //               this.$message.success("提交成功");
      //               this.dialogFormVisible = false;
      //               let obj = {
      //                 'avdId':0,
      //               };
      //               obj.avdId = res.result.avdId;
      //               getGuidesuccess(obj).then(res=>{
      //                 console.log(res)
      //               })
      //               // this.$refs['contributeForm'].resetFields()
      //             }
      //           })
      //         }else{
      //           return false; 
      //         }
      //       })
      //     }else{
      //       this.$message.error('请同意远大支持论坛投稿协议并承诺图片，字体，视频，内容不可侵犯');
      //       return false;
      //     }

      //   }
       
      // },
      // // 预览
      // goWatch(){
      //   // 通过代码获取编辑器内容
      //   let data = this.contributeForm.paragraph;
      //   console.log(data);
      //   this.$router.push({
      //     name:'preview',
      //     params:{
      //       data
      //     }
      //   })
      // },
       // 分页
      handleSizeChange(size) {
          this.listParams.size = size;
          // console.log(this.allParams.size);
      },
      handleCurrentChange(currentPage) {
          this.listParams.page = currentPage;
          console.log(this.listParams.page);
      },

    },
    watch:{
      listParams: {
        // 每个属性值发生变化就会调用这个函数
        handler(newVal) {
          this.handleArticlelist(newVal)
        },
        // 立即处理 进入页面就触发
        immediate: true,
        // 深度监听 属性的变化
        deep: true
      },

    },
    created(){
      getActicleoption().then(res=>{
        this.typeOption = res.result.typeOptions;
        console.log(this.typeOption,'数据');
        this.brandOption = res.result.brandOptions;
        this.moduleOption = res.result.moduleOptions;
        this.tagOption = res.result.tagOptions;
      })
      // 列表
      this.listParams.typeIds.push(parseInt(this.active_Warp))
    },
}
</script>

<style lang="less" scoped>
@import './../../../assets/style/edit.css';
.guide{
  width: 100%;
  background: #fff;
  .guide-header{
    width: 100%;
    height: 240px;
    .header-box{
      width: 100%;
      display: flex;
      height: 200px;
      border-radius: 5px;
      background: rgb(143, 139, 139);
      // margin: auto;
      img{
        width: 30%;
        height: 100%;
        display: block;
      }
      .right{
        width: 70%;
        padding: 2% 3% 1%;
        .title{
          font-size: 18px;
          line-height: 28px;
          color: #fff;
        }
        .content{
          font-size: 15px;
          color: #ccc;
          height: 43%;
          line-height: 25px;
          margin: 1% 0 0;
        }
        .right-bot{
          display: flex;
          font-size: 12px;
          color: #fff;
          li{
            padding: 3px 8px;
            background: #acacac;
            border-radius: 5px;
            margin-right: 1%;
          }
        }
      }
    }
  }
  .guide-content{
    width: 62.5%;
    margin: auto;
    position: relative;
    padding: 20px 0 30px;
    .el-upload-list__item-thumbnail{
      height: 148px !important;
    }
    .tab-title{
      display: flex;
      align-items: center;
      p{
        line-height: 64px;
      }
    }
    .icon{
      width: 22px;
      height: 22px;
      display: block;
      margin-right: 20px;
    }
   
    .btn{
      position: absolute;
      left: 19px;
      top: 425px;
      z-index: 99;
    }
    .content-box{
      width: 100%;
      padding:0 3%;
      position: relative;
      .el-input{
        width: 25%;
        position: absolute;
        top: 0;
        right: 3%;
        z-index: 99;
      }
      .all-con{
        border-radius: 2px;
        .all-list{
          display: flex;
          background: #F5F7FA;
          margin-bottom: 10px;
          padding: 20px;
          &:last-child{
             margin-bottom: 0;
          }
          .img-list{
            position: relative;
            width: 26%;
            // height: 100%;
            margin-right: 20px;
            img{
              width: 100%;
              height: 180px;
            }
            i{
              font-size: 60px;
              color: #000;
              position: absolute;
              top: 40%;
              left: 40%;
            }
          }
          .img-con{
            width: 74%;
            // padding: 1% 10% 1% 1%;
            .img-title{
              width: 100%;
              font-size: 22px;
              font-weight: 600;
              color: #191A24;
              line-height: 30px;
              margin-bottom: 5px;
              overflow: hidden;//溢出隐藏
              white-space: nowrap;//禁止换行
              text-overflow: ellipsis;//...
            }
            .img-intro{
              font-size: 14px;
              font-weight: 400;
              color: #666666;
              line-height: 20px;
              text-align: justify;
              margin-bottom: 5px;
              width: 100%;
              height: 32%;
              overflow : hidden;
              display: -webkit-box;    /*弹性伸缩盒子*/
              -webkit-box-orient: vertical; /*子元素垂直排列*/
              -webkit-line-clamp: 3;   /*可以显示的行数，超出部分用...表示*/
              text-overflow: ellipsis; /*（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)*/
            }
            ul{
              display: flex;
              font-size: 12px;
              color: #fff;
              li{
                padding: 5px 15px;
                font-size: 14px;
                font-weight: 400;
                color: #4370F3;
                line-height: 20px;
                margin-right: 5px;
                background: #ECF1FF;
                border-radius: 2px;
              }

            }
            .img-bottom{
              display: flex;
              justify-content: space-between;
              align-items: center;
              margin-top: 24px;
              font-size: 12px;
              font-weight: 400;
              color: #666666;
              line-height: 17px;
              .bot-left{
                display: flex;
                align-items: center;
               
                img{
                  width: 20px;
                  height: 20px;
                  display: block;
                  margin-right: 5px;
                  border-radius: 10px;
                }
              }
              .bot-right{
                display: flex;
                align-items: center;
                cursor: pointer;
                p{
                  display: flex;
                  align-items: center;
                  margin-right: 10px;
                  img{
                    width: 16px;
                    height: 16px;
                    display: block;
                    margin-right: 5px;
                    
                  };
                  span{
                    display: block;
                  }
                }
               
              }
            }
          }
        }
      }
    }
  }
}
.el-pagination{
  text-align: right;
  margin-top: 15px;
}
</style>